<template>
	<view class="pb-30">
		<image class="fixed top-0 index--1" style="width: 750rpx; height: 634rpx" src="/static/page-bg.png"></image>
		<uv-navbar :fixed="false" bgColor="transparent">
			<view slot="left">
				<nav-left></nav-left>
			</view>
		</uv-navbar>

		<view class="tab-wrap uv-tabs-fs-34">
			<uv-tabs inactiveStyle="color: #969696" activeStyle="color: #FF3C11" lineWidth="55rpx" lineHeight="6rpx"
				lineColor="#FF3C11" :scrollable="false" :list="tabList" :current="currentTabIndex"
				@change="handleTabChange"></uv-tabs>
		</view>

		<!-- 按订单号 -->
		<view class="mt-30" v-if="currentTabIndex == 0">
			<view class="input-wrap flex--center px-30 mx-40 bg-f" style="border-radius: 16rpx">
				<uv-input border="none" placeholder="请输入订单号查询订单" placeholderStyle="#bcbcbc" fontSize="28rpx"
					inputAlign="center" v-model="sn"></uv-input>
			</view>
			<button class="search-button uv-reset-button flex-center-center fs-30 fw-700 color-f"
				@click="search1">搜索</button>
		</view>

		<!-- 按手机号 -->
		<view class="mt-30" v-if="currentTabIndex == 1">
			<view class="input-wrap flex--center px-30 mx-40 bg-f" style="border-radius: 16rpx">
				<uv-input border="none" placeholder="请输入手机号" placeholderStyle="#bcbcbc" fontSize="28rpx" type="number"
					maxlength="11" v-model="mobile"></uv-input>
			</view>
			<view class="input-wrap flex--center px-30 mx-40 bg-f mt-20" style="border-radius: 16rpx">
				<uv-input border="none" placeholder="请输入验证码" placeholderStyle="#bcbcbc" fontSize="28rpx"
					v-model="captcha">
					<view slot="suffix">
						<view class="color-primary" @click="sendCode" :class="{on:time2 != 0}">{{codeText2}}</view>
					</view>
				</uv-input>
			</view>

			<button class="search-button uv-reset-button flex-center-center fs-30 fw-700 color-f"
				@click="search2">确定搜索</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '按订单号'
				}, {
					name: '按手机号'
				}],
				currentTabIndex: 0,

				sn: '',
				mobile: '',
				captcha: '',
				codeText2: "获取验证码",
				time2: 0,
				timer2: null,
			}
		},
		methods: {
			// 发送手机验证码
			async sendCode() {
				if (!this.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: "none",
						duration: 1500
					});
					return
				}
				let re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
				let result = re.test(this.mobile);
				if (!result) {
					uni.showToast({
						title: '手机号格式有误',
						icon: "none",
						duration: 1500
					});
					return
				}
				if (this.time2 != 0) {
					uni.showToast({
						title: "稍后重试",
						icon: 'none'
					})
					return
				}

				let resultx = await this.$api.sendSms({
					phone: this.mobile
				})
				if (resultx) {
					uni.showToast({
						title: '发送成功',
						icon: "none"
					});
					this.time2 = 30
					this.timer2 = setInterval(() => {
						this.time2--
						this.codeText2 = this.time2 + "s后重新发送"
						if (this.time2 == 0) {
							clearInterval(this.timer2)
							this.codeText2 = '发送验证码'
						}
					}, 1000)
				}
			},
			search1() {
				uni.navigateTo({
					url: `/pages/order-list2?sn=${this.sn}&type=1`
				})
			},
			search2() {
				if (!this.mobile || !this.captcha) {
					uni.showToast({
						title: '手机号验证码不能为空',
						icon: "none"
					});
					return
				}
				this.$api.CheckSms({
					customerPhone: this.mobile,
					code: this.captcha
				}).then(res=>{
					if(res.code == 200){
						uni.navigateTo({
							url: `/pages/order-list2?phone=${this.mobile}&captcha=${this.captcha}&type=2`
						})
					}
				})
			},
			handleTabChange(event) {
				console.log('handleTabChange', event)
				this.currentTabIndex = event.index
			},
		},
	}
</script>

<style lang="scss" scoped>
	.tab-wrap {
		width: 500rpx;
		margin: 20rpx auto 0;
	}

	.input-wrap {
		width: 662rpx;
		height: 86rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 11rpx 43rpx 8rpx rgba(246, 226, 223, 0.56);
	}

	.search-button {
		width: 203rpx;
		height: 76rpx;
		background: #ff4c2a;
		border-radius: 14rpx;
		margin-top: 45rpx;
	}
</style>